<template>
    <tpl src="tpl/components/dialog.tpl" width="400" height="300" title="地图" :x="dialogX" :y="dialogY" :visible="visible">
        <img src="res/ui/map.jpg" x="15" y="48" width="370" height="235" @over="tipOn" @out="tipOut" @move="tipMove" @click="autoRun"></img>
        <txt :text="mapName" x="170" y="50" size="16" color="#ffffff"></txt>
        <txt :text="tipText" :x="tipX" :y="tipY" :visible="tipVisible" size="16" color="#ffffff"></txt>
        <box :x="roleX" :y="roleY" filter="#FF0000" note="上色">
            <img src="res/ui/colorBg.png" width="5" height="5"></img>
        </box>
    </tpl>
</template>

<script>
data(){
    return {
        mapName: "盟重省",
        tipText: "0,0",
        tipX: 0,
        tipY: 0,
        tipVisible: false,
        dialogX: 0,
        dialogY: 0,
        roleX: 200,
        roleY: 195
    }
}

create() {
    console.log("mnimap create");
}

update(delta) {

}

destroyed() {
    
}

tipOn(event){
    this.tipVisible = true;
}

tipOut(event){
    this.tipVisible = false;
}

tipMove(event){
    this.tipX = event.x + 15 - this.x - this.dialogX;
    this.tipY = event.y - this.y - this.dialogY;
    this.tipText = this.tipX + "," + this.tipY;
}

autoRun(event){
    this.roleX = event.x - this.x - this.dialogX;
    this.roleY = event.y - this.y - this.dialogY;
}

</script>